<template>
        <!--selector-->
        <div>
                    <div class="clearfix selector" @click="Category">
                    <div class="type-wrap logo">
                        <div class="fl key brand">品牌</div>
                        <div class="value logos">
                            <ul class="logo-list">
                                <li v-for="data in searchResult.trademarkList"  :key="data.tmId" :data-tmName='data.tmId + ":" + data.tmName' >{{data.tmName}}</li>
                            </ul>
                        </div>
                        <div class="ext">
                            <a href="javascript:void(0);" class="sui-btn">多选</a>
                            <a href="javascript:void(0);">更多</a>
                        </div>
                    </div>
                    <div class="type-wrap" v-for="data in searchResult.attrsList" :key="data.attrId">
                        <div class="fl key">{{data.attrName}}</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li v-for="list,index in data.attrValueList" :key="index" @click="Category" >
                                    <a :data-sort='data.attrId+":"+data.attrName+":"+list'>{{list}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext"></div>
                    </div>
                </div>
                <!--details-->
        </div>
</template>

<script>
export default {
    name:'ClassiFication',
    data(){
        return{
            data:{
                trademark:'',
                props:[]
            }
        }
    },
    props:['searchResult','sdata'],
    methods:{
        Category(e){
            if(e.target.dataset.tmname || e.target.dataset.sort){
                this.data.trademark= undefined
            if(e.target.dataset.tmname){
                console.log(e.target.dataset)
                this.data.trademark = e.target.dataset.tmname
            }else if(this.$route.query.trademark){
                this.data.trademark = this.$route.query.trademark
            }
            // console.log(JSON.parse(this.$route.query.props))
            if(this.$route.query.props){
                this.data.props = JSON.parse(this.$route.query.props)
            }else{
                this.data.props = [];
            }
            if(e.target.dataset.sort){
                if(this.data.props[0]){
                    this.data.props.forEach(element => {
                    if(element.indexOf(e.target.dataset.sort) === -1){
                        this.data.props.push(e.target.dataset.sort)
                    } 
                });
                }else{
                    this.data.props.push(e.target.dataset.sort)
                }
            }
            let sieve ={}
            if(!this.data.trademark){
                sieve = {
                    props:this.data.props 
                }
            }else{
                sieve = {
                    props:this.data.props ,
                    trademark:this.data.trademark
                }
            }
            let copydata = {...this.sdata[0],...sieve}
            
            if(copydata.props){
                copydata.props = JSON.stringify(copydata.props)
            }
            // this.$router.push({
            //     name:'search',
            //     params:{
            //         ...this.sdata[1]
            //         },
            //     query:copydata
            // })
            this.$emit('ClassiFication',this.sdata[1],copydata)
            }
        },
    },
}
</script>

<style>

</style>